// 导航栏交互逻辑
class ResponsiveNavbar {
    constructor() {
        this.navToggle = document.querySelector('.nav-toggle');
        this.navMenu = document.querySelector('.nav-menu');
        this.navbar = document.querySelector('.navbar');
        this.isOpen = false;

        this.init();
    }

    init() {
        this.navToggle.addEventListener('click', (e) => {
            e.stopPropagation();
            this.toggleMenu();
        });

        // 点击菜单外区域关闭菜单
        document.addEventListener('click', (e) => {
            if (!this.navbar.contains(e.target) && this.isOpen) {
                this.closeMenu();
            }
        });

        // ESC键关闭菜单
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && this.isOpen) {
                this.closeMenu();
            }
        });

        // 菜单项点击后关闭菜单（移动端）
        this.navMenu.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', () => {
                if (window.innerWidth < 768) {
                    this.closeMenu();
                }
            });
        });
    }

    toggleMenu() {
        this.isOpen ? this.closeMenu() : this.openMenu();
    }

    openMenu() {
        this.navMenu.style.display = 'flex';
        setTimeout(() => {
            this.navMenu.classList.add('active');
            this.navToggle.classList.add('active');
        }, 10);
        this.isOpen = true;
        this.navToggle.setAttribute('aria-expanded', 'true');
    }

    closeMenu() {
        this.navMenu.classList.remove('active');
        this.navToggle.classList.remove('active');
        setTimeout(() => {
            if (!this.navMenu.classList.contains('active')) {
                this.navMenu.style.display = 'none';
            }
        }, 300);
        this.isOpen = false;
        this.navToggle.setAttribute('aria-expanded', 'false');
    }
}

// 屏幕尺寸显示
function updateScreenSize() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    let sizeType = '';

    if (width < 768) {
        sizeType = '移动端';
    } else if (width < 1024) {
        sizeType = '平板端';
    } else {
        sizeType = '桌面端';
    }

    document.getElementById('sizeInfo').textContent =
        `${width} × ${height} (${sizeType})`;
}

// 初始化
document.addEventListener('DOMContentLoaded', () => {
    new ResponsiveNavbar();
    updateScreenSize();
    window.addEventListener('resize', updateScreenSize);
});